<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无标题文档</title>
<link href="css/bootstrap-4.3.1.css" rel="stylesheet" type="text/css">
</head>
<style>
	body{
		margin: 0;
		padding: 0;
		background-color: rgba(24,24,24,1.00)
	}
	.frame_style{
		width: 100%;
		height: 100%;
	}
	.showbox{
		width: 95%;
		height: 550px;
		margin: 20px auto;
		border-radius: 10px;
		background-image: url("img/bgimg00.png");
		background-size: cover;
		background-repeat: no-repeat;
		
	}
	</style>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">任务选项</a>
	  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
	  <div class="collapse navbar-collapse" id="navbarSupportedContent1">
	    <ul class="navbar-nav mr-auto">
			<li class="nav-item see-item"> <a class="nav-link" href="#">键盘焦点</a> </li>
	      <li class="nav-item see-item"> <a class="nav-link" href="#">display排列</a> </li>
	      <li class="nav-item see-item"> <a class="nav-link" href="#">导航菜单</a> </li>
<!--
	      <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
	        <div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
	          <div class="dropdown-divider"></div>
	          <a class="dropdown-item" href="#">Something else here</a> </div>
          </li>
-->
	      <li class="nav-item see-item"> <a class="nav-link" href="#">浮动</a> </li>
			<li class="nav-item see-item"> <a class="nav-link" href="#">悬停效果</a> </li>
			<li class="nav-item see-item"> <a class="nav-link" href="#">浮动布局</a> </li>
			<li class="nav-item see-item"> <a class="nav-link" href="#">图标</a> </li>
			<li class="nav-item see-item"> <a class="nav-link" href="#">2D效果</a> </li>
			<li class="nav-item see-item"> <a class="nav-link" href="#">3D效果</a> </li>
			<li class="nav-item see-item"> <a class="nav-link" href="#">动画</a> </li>
			<li class="nav-item see-item"> <a class="nav-link" href="#">立方体</a> </li>
			<li class="nav-item"> <a class="nav-link" href="#">代码仓库</a> </li>
        </ul>
  </div>
</nav>
<div class="showbox">
  <div style="height: 35px;border-bottom: 3px #000 solid"><p style="text-align: center;color: white;font-size: 13px;padding-top: 5px">任务展示</p></div>
  <iframe class="frame_style" src="zwork11.html" frameborder="0"></iframe>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.3.1.js"></script>
</body>
<script>
	var Incode='';
	var urlList=new Array('zwork11.html','zwork2.html','zwork1.html','zwork3.html','zwork4.html','zwork5.html','zwork6.html','zwork8.html','zwork9.html','zwork10.html','zwork7.html',Incode)
	$(document).ready(function(){
		$('.see-item').click(function(){
			var thisIndex=$(this).index();
			document.querySelector('.frame_style').src=urlList[thisIndex];
		})
	})
</script>
</html>
